{extend name="common:base" /}
{block name="css"}
<link rel="stylesheet" href="__STATIC__/css/layer.css" />
{/block}
{block name="main"}
<div class="admin-content-body">
    <div class="am-cf am-padding am-padding-bottom-0">
        <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">商品分类</strong> / <small>添加</small></div>
    </div>
    <hr>
    <div class="am-g">
        <div class="am-u-sm-5">
            <form class="am-form" method="post">
              <fieldset>
                <div class="am-form-group">
                  <label for="doc-ipt-email-1">父级菜单</label>
                    <select id="doc-select-1" name="parent_id">
                    <option value="0">顶级菜单</option>
                    {foreach $list as $vo} 
                        <option value="{$vo.id}">
                            {$vo.tree_deep|str_repeat='&nbsp;&nbsp;',###}
                        {$vo.title}
                        </option>
                    {/foreach}
                  </select>
                </div>

                <div class="am-form-group">
                  <label for="doc-ipt-pwd-1">名称</label>
                  <input type="text" class="" id="doc-ipt-pwd-1" placeholder="" name="title">
                </div>

                <div class="am-form-group">
                  <label for="doc-ta-1">描述</label>
                  <textarea class="" rows="2" id="doc-ta-1" name="description"></textarea>
                </div>
                <div class="am-radio">
                  <label>
                    <input type="radio" name="status" value="1" checked>
                    正常
                  </label>
                </div>

                <div class="am-radio">
                  <label>
                    <input type="radio" name="status" value="0">
                    禁用
                  </label>
                </div>

                <p><button type="submit" class="am-btn am-btn-default">提交</button></p>
              </fieldset>
            </form>
        </div>
    </div>

    <div class="ui-dialog" id="dialog">
        <div class="ui-dialog-title" id="dialogTitle">
        编辑
        <a href="javascript:hideDialog();" class="ui-dialog-title-closebutton"></a>
        </div>
        <table>
            <tbody >
                <tr>
                    <td><input type="text" class="ui-dialog-input0" disabled="true" id="input0"></td>
                    <td><input type="text" class="ui-dialog-input1" id="input1"></td>
                    <td><input type="text" class="ui-dialog-input2" id="input2"></td>
                </tr>
            </tbody>
        </table>
        <div>
                <div class="ui-dialog-space"></div>
                <button id="sub" type="button" class="am-btn-xs am-btn am-btn-primary am-btn-block">提交</button>
                <div class="ui-dialog-space"></div>
        </div>
    </div>

    <hr />
    <p><pre>
  注：本页使用方法：
          1、可以通过选择框后的按钮修改一级分类的状态。
          2、可以在选择框里选择分类，并使用输入框添加其子类
          3、若在选择框里选择的是“顶级分类”，则通过输入框添加的即为一级分类
          4、若在选择框里选择的是一级分类，则通过输入框添加的即为一级分类的子类
          5、在使用输入框添加新的商品分类时，格式为 => 分类名：描述。其中描述可以不写（包括冒号）
    <pre></p>
</div>
{/block}
{block name="js"}
<script type="text/javascript">
function expand(el)
{
    childobj = document.getElementById("child" + el);

    if (childobj.style.display == 'none')
    {
        childobj.style.display = 'block';
    }
    else
    {
        childobj.style.display = 'none';
    }
    return;
}

function notuse(cate_id) {
    $.get("{:url('admin/category/notuse')}?cate_id=" + cate_id, function(result) {
        if (result == true) {
            alert("修改成功！");
            location.reload(true);
        }
        else if (result == false)
            alert("修改失败！");
        else
            alert(result);
    });
}

$('select[name="filter"]').find('option[value="{:input('param.filter', '')}"]').attr('selected', true);
if (!$.AMUI.support.mutationobserver) {
    $selected.trigger('changed.selected.amui');
}

$('select[name="filter"]').on('change', function(event) {
    var el = $(this);
    location.href = "{:url('admin/category/list')}/filter/"+ el.val();
});

function EnterPress() { //传入 event
    var e = window.event || arguments.callee.caller.arguments[0];
    if(e && e.keyCode == 13 ) {
        var s = window.location.pathname.split("/");
        if (s[s.length-2] != 'filter') {
            var t = '0';
        }
        else {
            var t = s[s.length-1];
        }
        var detail = $('#add_detail').val();
        $.post("{:url('admin/category/addtype')}", { title: detail, parent_id: t }, function(data){
            if (data == true){
                alert("添加成功！");
                location.reload(true);
            }
            else{
                alert("添加失败！");
            }

       })
    }
}
$('#add_type').on('click', function() {
    var s = window.location.pathname.split("/");
    var t = s[s.length-1];
    var detail = $('#add_detail').val();
    $.post("{:url('admin/category/addtype')}", { title: detail, parent_id: t }, function(data){
        if (data == true){
            alert("添加成功！");
            location.reload(true);
        }
        else{
            alert("添加失败！");
        }

   })
});

$('#change_type').on('click', function() {
    var s = window.location.pathname.split("/");
    var t = s[s.length-1];
    if (t != '0'){
        $.post("{:url('admin/category/changetype')}", { cate_id: t}, function(data){
            if (data == true){
                alert("修改成功！");
                location.reload(true);
            }
            else if (data == false) {
                alert("修改失败！");
            }
            else
                alert(data);
       })
    }

});

//  获取元素对象
function g(id){ return document.getElementById(id); }

//  自动居中 - 登录浮层 ( el = Elemenet)
function autoCenter( el ){
    var bodyW = document.documentElement.clientWidth;
    var bodyH = document.documentElement.clientHeight;

    var elW = el.offsetWidth;
    var elH = el.offsetHeight;

    el.style.left = ( bodyW - elW  ) / 2  + 'px';
    el.style.top  = ( bodyH - elH  ) / 2  + 'px';
}

var mouseOffsetX = 0;   //  偏移
var mouseOffsetY = 0;

var isDraging = false;  //  是否可拖拽的标记

//  鼠标事件1 － 在标题栏上按下（要计算鼠标相对拖拽元素的左上角的坐标，并且标记元素为可拖动）
g('dialogTitle').addEventListener('mousedown',function(e){
    var e = e || window.event;
    mouseOffsetX = e.pageX - g('dialog').offsetLeft;
    mouseOffsetY = e.pageY - g('dialog').offsetTop;
    isDraging = true;
})

//  鼠标事件2 － 鼠标移动时（要检测，元素是否可标记为移动，如果是，则更新元素的位置，到当前鼠标的位置［ps：要减去第一步中获得的偏移］）
document.onmousemove = function( e ){
    var e = e || window.event;

    var mouseX = e.pageX;   // 鼠标当前的位置
    var mouseY = e.pageY;

    var moveX = 0;  //  浮层元素的新位置
    var moveY = 0;

    if( isDraging === true ){

        moveX = mouseX - mouseOffsetX;
        moveY = mouseY - mouseOffsetY;

        //  范围限定   moveX > 0 并且  moveX < (页面最大宽度 - 浮层的宽度)
        //            moveY > 0 并且  movey < (页面最大高度 - 浮层的高度)

        var pageWidth  = document.documentElement.clientWidth ;
        var pageHeight = document.documentElement.clientHeight ;

        var dialogWidth  = g('dialog').offsetWidth;
        var dialogHeight = g('dialog').offsetHeight;

        var maxX = pageWidth - dialogWidth;
        var maxY = pageHeight- dialogHeight;

        moveX = Math.min( maxX , Math.max(0,moveX) );
        moveY = Math.min( maxY , Math.max(0,moveY) );

        g('dialog').style.left = moveX + 'px';
        g('dialog').style.top  = moveY + 'px';
    }

}

//  鼠标事件3 － 鼠标松开的时候（标记元素为不可拖动即可）
document.onmouseup = function(){
    isDraging = false;
}

//  展现登录浮层
function showDialog(title){
    var a = title.split(',', 3)
    g('input0').value = a[2];
    g('input1').value = a[0];
    g('input2').value = a[1];
    g('dialog').style.display="block";
    autoCenter(g('dialog'));
    fillToBody( g('mask') );
}

//  隐藏登录浮层
function hideDialog(){
    g('dialog').style.display = 'none';
}

window.onresize=function(){
    autoCenter(g('dialog'));
    fillToBody( g('mask') );
}

$('#sub').on('click', function() {
    var cate_id = $('#input0').val();
    var title = $('#input1').val();
    var description = $('#input2').val();
    $.post("{:url('admin/category/revise')}", { cate_id: cate_id, title: title, description: description },
    function(data){
        g('dialog').style.display="none";
        location.reload(true);
    })
});
</script>
{/block}
